// 边-定制样式
<template>
  <div id="container"></div>
</template>

<script setup>
import { Graph } from "@antv/x6";
import { onMounted } from "vue";

const data = {
  nodes: [
    {
      id: "node1",
      shape: "rect",
      x: 100,
      y: 100,
      width: 80,
      height: 40,
      label: "hello",
    },
    {
      id: "node2",
      shape: "ellipse",
      x: 240,
      y: 300,
      width: 80,
      height: 40,
      label: "world",
    },
  ],
  edges: [
    {
      source: "node1",
      target: "node2",
      attrs: {
        line: {
          stroke: "orange",
        },
      },
    },
  ],
};
const renderGraph = () => {
  const graph = new Graph({
    container: document.getElementById("container"),
    width: 800,
    height: 600,
    background: {
      color: "#fffbe6", // 设置画布背景颜色
    },
  });
  graph.fromJSON(data); // 渲染元素
  graph.centerContent(); // 居中显示
};

onMounted(() => {
  renderGraph();
});
</script>
